<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>自定义指令</title>
    <style>
        [v-cloak] {
            display: none
        }

        * {
            margin: 0px;
            padding: 0px;
            list-style: none;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <input type="text" v-model="nickname" v-focus.trim.number="nickname" />
        <h1 v-time="regtime"></h1>
        <h1 v-time="regtime1"></h1>
        <h1 v-time="regtime2"></h1>
        <h1>
            {{regtime | fmtTime}}
        </h1>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.6.4/vue.js"></script>
    <script src="formater.js"></script>
    <script>
        Vue.config.productionTip = false
        Vue.config.devtools = false

        Vue.directive("focus", {
            bind(el, binding) {
                // if (binding.modifiers["trim"]) {
                //     console.log("值需要去空格")
                // }
                // if (binding.modifiers["number"]) {
                //     console.log("值需要变成数字类型")
                // }
            },
            inserted(el, binding) {
                el.focus()
            },
            unbind(el, binding) {

            }
        })



        new Vue({
            data: {
                nickname: "Simba",
                regtime: new Date("2019-2-27 09:01:00"),
                regtime1: new Date("2019-2-26 08:41:00"),
                regtime2: new Date("2019-2-27 02:01:00")
            },
            created() {
                // console.log(this.$data)
            },
            mounted() {
                // console.log(this.$el)
            },
        }).$mount("#app")
    </script>
</body>

</html>